﻿@{
    ViewBag.Title = "物料基本信息";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.ListContent.cshtml";
}

@section PageTitle
{
    <h5>物料基本信息</h5>
}

@section PageTools
{
    <a href="javascript:void(0)" class="btn btn-primary btn-xs" v-on:click="openAddOrEditModal(0)">添加</a>
}

<div class="material-list">
    <table class="table table-hover table-bordered table-condensed">
        <thead>
        <tr>
            <th style="width: 120px"></th>
            <th>物料名称</th>
            <th>物料药批号</th>
            <th>物料药产地</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in materialList">
            <td>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-default" v-on:click="openAddOrEditModal(item.id)"><span class="glyphicon glyphicon-edit"></span></button>
                    <button type="button" class="btn btn-danger" v-on:click="deleteInfo(item)"><span class="glyphicon glyphicon-trash"></span></button>
                </div>
            </td>
            <td>{{item.name}}</td>
            <td>{{item.batchNumber}}</td>
            <td>{{item.originAddress}}</td>
        </tr>
        </tbody>
    </table>
    <div class="text-center" v-if="pageIndexList.length>1">
        <div class="btn-group">
            <button type="button" class="btn btn-white" v-on:click="prevPageList()">
                <i class="fa fa-chevron-left"></i>
            </button>
            <template v-for="index in pageIndexList">
                <button class="btn btn-white" v-bind:class="{'active':index===pageIndex}" v-on:click="goPageList(index)">{{index}}</button>
            </template>
            <button type="button" class="btn btn-white" v-on:click="nextPageList()">
                <i class="fa fa-chevron-right"></i>
            </button>
        </div>
    </div>
</div>
@section modal
{
    <div v-show="modalVisible" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: none;">
    <div class="modal" id="addOrEditModal" v-bind:class="{'in':modalVisible}" style="display: block;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" v-on:click="closeModal()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">{{modalInfo.act=='add'?'添加':'编辑'}}物料信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">物料名称</label>
                        <input type="text" class="form-control" id="name" v-model="modalInfo.name" />
                    </div>
                    <div class="form-group">
                        <label for="batchNumber">物料批次号</label>
                        <input type="text" class="form-control" id="batchNumber" v-model="modalInfo.batchNumber" />
                    </div>
                    <div class="form-group">
                        <label for="code">代码</label>
                        <input type="text" class="form-control" id="code" v-model="modalInfo.code">
                    </div>
                    <div class="form-group">
                        <label for="originAddress">物料药产地</label>
                        <input type="text" class="form-control" id="originAddress" v-model="modalInfo.originAddress" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal"  v-on:click="closeModal()">关闭</button>
                    <button type="button" class="btn btn-primary" v-on:click="saveInfo()">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop in" v-on:click.stop.prevent="closeModal()"></div>
</div>
}

@section Foot
{
    <script src="/api/AbpServiceProxies?name=app%2Fmaterial"></script>
    <script>
        var emptyMaterialInfo = {
            id: 0,
            name: '',
            code: '',
            batchNumber: '',
            originAddress: ''
        };
        var vm = new Vue({
            el: '#vue-root',
            data: {
                modalVisible:false,
                currentPageInfo: {
                    skipCount: 0,
                    maxResultCount: 10,
                    totalCount: 0
                },
                materialList: [],
                modalInfo: {
                    act: 'add',
                    id: 0,
                    name: '',
                    code: '',
                    batchNumber: '',
                    originAddress: ''
                }
            },
            computed: {
                pageIndexList:function() { //分码
                    if (this.currentPageInfo.totalCount <= 0) return [];
                    var totalPageCount = Math.ceil(this.currentPageInfo.totalCount / this.currentPageInfo.maxResultCount);
                    var indexList = [];
                    for (var i = 1; i <= totalPageCount; i++) {
                        indexList.push(i);
                    }
                    return indexList;
                },
                pageIndex: function () { //当前页码
                    return this.currentPageInfo.skipCount / this.currentPageInfo.maxResultCount + 1;
                }
            },

            methods: {
                openModal: function () {
                    this.modalVisible = true;
                },
                closeModal:function() {
                    this.modalVisible = false;
                },
                loadMaterials: function () {
                    var that = this;
                    abp.services.app.material.pagedList({
                        skipCount: this.currentPageInfo.skipCount,
                        maxResultCount: this.currentPageInfo.maxResultCount
                    }, {
                        async: false,
                        timeout: 30000
                    }).done(function (response) {

                        var result = response;
                        that.currentPageInfo.totalCount = result.totalCount;
                        if (result.totalCount !== 0 && result.items.length === 0) { //当此页的数据被删完之后,得跳回上一页
                            that.prevPageList();
                            return;
                        }
                        that.materialList = [];
                        for (var i = 0; i < result.items.length; i++) {
                            var item = result.items[i];
                            that.materialList.push(item);
                        }
                    });
                },
                nextPageList: function () { //下一页
                    var oldSkip = this.currentPageInfo.skipCount;

                    this.currentPageInfo.skipCount += this.currentPageInfo.maxResultCount;
                    if (this.currentPageInfo.skipCount > this.currentPageInfo.totalCount) {
                        this.currentPageInfo.skipCount = oldSkip; //如果是最后一页,则不做处理
                        return;
                    }

                    this.loadMaterials();
                },
                prevPageList: function () {  //上一页
                    if (this.currentPageInfo.skipCount <= 0) return;
                    this.currentPageInfo.skipCount -= this.currentPageInfo.maxResultCount;
                    if (this.currentPageInfo.skipCount <= 0) {
                        this.currentPageInfo.skipCount = 0;//如果是第一页
                    }
                    this.loadMaterials();
                },
                goPageList: function (pageIndex) { //跳转至指定页
                    var skipCount = (pageIndex - 1) * this.currentPageInfo.maxResultCount;
                    if (skipCount != this.currentPageInfo.skipCount) {
                        this.currentPageInfo.skipCount = skipCount;
                        this.loadMaterials();
                    }
                },
                openAddOrEditModal: function (id) {
                    var that = this;
                    if (!id) {
                        that.modalInfo.act = 'add';
                        
                        $.extend(that.modalInfo, emptyMaterialInfo);

                        that.openModal();
                    } else {
                        abp.services.app.material.getInfo(id, { async: false })
                            .done(function (response) {
                                that.modalInfo.act = 'edit';
                                
                                $.extend(that.modalInfo, response);

                                that.openModal();
                            });
                    }
                },
                saveInfo: function () {
                    var that = this;
                    console.log(that.$data.modalInfo)
                    if (this.modalInfo.act === "add") {
                        
                        abp.services.app.material.create(that.$data.modalInfo, { async: false })
                            .done(function (response) {

                                that.loadMaterials();
                                that.closeModal();
                            });
                    }else if (this.modalInfo.act === "edit") {
                        abp.services.app.material.update(that.$data.modalInfo, { async: false })
                            .done(function (response) {
                                that.loadMaterials();

                                that.closeModal();
                            });
                    }
                },
                deleteInfo: function (item) {
                    var that = this;
                    abp.message.confirm("您确定要删除吗?", function (isConfirmed) {
                        if (isConfirmed) {
                            abp.services.app.material['delete'](item.id, { async: false })
                                .done(function () {
                                    abp.notify.success('成功删除物料信息!');
                                    that.loadMaterials();
                                });
                        }
                    });
                }
            },
            mounted: function () {
                //页面初始化好后加载数据
                this.loadMaterials();
            }
        });
    </script>
}
